<template>
  <div class="profile">
    <div class="header">
      <h1>{{ isChinese ? "个人信息" : "userinfo"}}</h1>
    </div>

    <el-switch
        v-model="isChinese"
        inline-prompt
        active-text="中文"
        inactive-text="英文"
    />
    <div class="main-content">
      <div class="avatar-section">
        <el-avatar :size="150" :src="accountData.userInfo.imageUrl" alt="User Avatar"></el-avatar>
        <el-upload
            class="avatar-upload"
            :show-file-list="false"
            :before-upload="beforeUpload"
        >
          <el-button type="primary">{{ isChinese ? "更换头像" : "change avatar" }}</el-button>
        </el-upload>
      </div>

      <div class="info-border">
        <el-descriptions :title="`${isChinese ? '用户名' : 'username'}：${accountData.userInfo.name}`">
          <el-descriptions-item :label="isChinese ? '访问量' :'visit volume'"
          >
            <el-tag>{{ accountData.userInfo.visits }}</el-tag>
          </el-descriptions-item
          >
          <el-descriptions-item :label="isChinese ? '邮箱' : 'email'">{{
              accountData.userInfo.email
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="isChinese? '所在地' : 'location'">{{
              accountData.userInfo.address
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="isChinese? '等级':'grade'">
            <el-tag size="medium" style="font-weight: 600">{{
                accountData.userInfo.grade
              }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="isChinese?'个性签名':'signature'">{{
              accountData.userInfo.signature
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="isChinese?'加入爱旅游时间':'join time'">{{
              accountData.userInfo.createTime
            }}
          </el-descriptions-item>
          <el-collapse-item title="详细资料">
            <div>
              <el-descriptions>
                <el-descriptions-item label="性别">{{
                    accountData.userInfo.gender
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="电话">{{
                    accountData.userInfo.tele
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="出生日期">{{
                    accountData.userInfo.birthday
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="经验值">{{
                    accountData.userInfo.experience
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="岗位">{{
                    accountData.userInfo.post
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="职业">{{
                    accountData.userInfo.profession
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-collapse-item>
        </el-descriptions>
        <div class="info-action">
          <el-button @click="accountData.userInfoDialogVisible = true" type="primary">
            {{ isChinese ? "更改信息" : "change info" }}
          </el-button>
          <el-button @click="accountData.passwordDialogVisible = true" type="primary">
            {{ isChinese ? "修改密码" : "change password" }}
          </el-button>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
      v-model="accountData.userInfoDialogVisible"
      title="修改个人信息"
      width="30%"
      :before-close="handleClose"
  >
    <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="infoFormLabelAlign"
        style="max-width: 460px"
    >
      <el-form-item label="用户名">
        <el-input v-model="infoFormLabelAlign.name"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="infoFormLabelAlign.email"/>
      </el-form-item>
      <el-form-item label="所在地">
        <el-input v-model="infoFormLabelAlign.address"/>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input v-model="infoFormLabelAlign.signature"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="accountData.userInfoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleChangeUserInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="accountData.passwordDialogVisible"
      title="修改密码"
      width="30%"
  >
    <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
    >
      <el-form-item label="旧密码">
        <el-input v-model="formLabelAlign.oldPassword"/>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="formLabelAlign.newPassword"/>
      </el-form-item>
      <el-form-item label="确定密码">
        <el-input v-model="formLabelAlign.confirmPassword"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="accountData.passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleChangePassword">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {getUserInfo, uploadAvatar, changePassword, changeInfo} from "@/api/account.js";
import {ElMessage} from "element-plus";

const accountData = reactive({
  userInfo: {},
  userInfoDialogVisible: false,
  passwordDialogVisible: false
});
const isChinese = ref(true);
const labelPosition = ref("right");

const formLabelAlign = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

const infoFormLabelAlign = reactive({
  name: "",
  email: "",
  address: "",
  signature: ""
});

async function getAccountData() {
  const {data: res} = await getUserInfo();

  if (res && res.code === 200) {
    accountData.userInfo = res.data;
  }
}

async function changeAvatar() {
  const {data: res} = await uploadAvatar();

  if (res && res.code === 200) {
    accountData.userInfo.imageUrl = res.data;
    ElMessage({
      message: "上传成功",
      type: "success"
    });
  }
}

async function changeUserPassword() {
  const {data: res} = await changePassword();

  if (res && res.code === 200) {
    accountData.passwordDialogVisible = false;
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  }
}

async function changeUserInfo() {
  const {data: res} = await changeInfo();

  if (res && res.code === 200) {
    accountData.userInfoDialogVisible = false;
    accountData.userInfo.name = infoFormLabelAlign.name;
    accountData.userInfo.email = infoFormLabelAlign.email;
    accountData.userInfo.signature = infoFormLabelAlign.signature;
    accountData.userInfo.address = infoFormLabelAlign.address;
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  }
}

const handleChangeUserInfo = () => {
  changeUserInfo();
};
const handleChangePassword = () => {
  changeUserPassword();
};

const editUserInfo = (done) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
      .then(() => {
        done();
      })
      .catch(() => {
        // catch error
      });
};

onMounted(() => {
  getAccountData();
});

const beforeUpload = (file) => {
  changeAvatar();
  return false;
};
</script>

<style scoped>
.profile {
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

.avatar-section {
  text-align: center;
}

.avatar-upload {
  margin-top: 10px;
}

.info-border {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
